<script setup lang="ts">
import { getPrivileges } from '@fl/api/iam-api'
import ButtonItem from '@fl/components/button-item.vue'
import { ElButton, ElDatePicker, ElForm, ElFormItem, ElInput, ElOption, ElSelect, ElTag } from 'element-plus'
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'

import type { seachDataTy, seachOrderBtnTy } from './types'

import { useTable } from './hooks/use-table'

const router = useRouter()
const { btns, gridOptions, state, tabConfig, tags, xGrid } = useTable()
tabConfig.index = 2

// 搜索
const seachData = ref<seachDataTy>({ ...state.value })

// 订单按钮集合
const orderBtn = reactive<seachOrderBtnTy[]>([
    {
        id: 0,
        text: '全部',
    },
    {
        id: 1,
        text: '预签约',
    },
    {
        id: 2,
        text: '待签署',
    },
    {
        id: 3,
        text: '已签署',
    },
])
const btnId = ref(0)
// 搜索订单状态按钮函数
function orderCheckBtnFn(id: number) {
    btnId.value = id
}

// 退款设置
// const refundVisible = ref<boolean>(false)
// const toSetup = () => {
//     refundVisible.value = true
// }
// const cancelSetup = () => {
//     refundVisible.value = false
// }

function reset() {
    seachData.value = { ...state.value }
}

const gridEvents: any = {
    pageChange({ currentPage, pageSize }) {
        tabConfig.currentPage = currentPage
        tabConfig.pageSize = pageSize
        getData()
    },
}
getData()

async function getData() {
    tabConfig.loading = true
    getPrivileges({
        page: tabConfig.currentPage,
        page_size: tabConfig.pageSize,
    }).then((res: any) => {
        tabConfig.total = res.total ?? 0
        tabConfig.data = res?.items ?? []
        tabConfig.loading = false
    })
}
function doAction(item: any, row: any) {
    console.log('row', row)
    switch (item.value) {
        case 1:
            router.push({
                path: '/trade-center/good-room/order-info',
                query: {
                    type: 'view',
                },
            })
            break
        case 2:
            router.push({
                path: '/trade-center/good-room/order-info',
                query: {
                    type: 'setup',
                },
            })
            break
        default:
            break
    }
}
function toggleAllCheckboxEvent() {
    const $grid = xGrid.value
    if ($grid)
        $grid.toggleAllCheckboxRow()
}

function toggleCheckboxEvent(row) {
    const $grid = xGrid.value
    if ($grid)
        $grid.toggleCheckboxRow(row)
}
</script>

<template>
    <div class="seach">
        <ElForm inline
                style="border-bottom: 1px solid #cdcdd4"
        >
            <ElFormItem label="合同编号">
                <ElInput v-model="seachData.orderId"
                         type="text"
                         width="260"
                         size="small"
                />
            </ElFormItem>

            <ElFormItem label="出卖人">
                <ElInput v-model="seachData.orderId"
                         type="text"
                         width="260"
                         size="small"
                />
            </ElFormItem>

            <ElFormItem label="买受人">
                <ElInput v-model="seachData.orderId"
                         type="text"
                         width="260"
                         size="small"
                />
            </ElFormItem>

            <ElFormItem label="签订时间">
                <ElDatePicker v-model="seachData.submitDate"
                              type="daterange"
                              format="YYYY-MM-DD"
                              size="small"
                              style="width: 224px"
                />
            </ElFormItem>

            <br>

            <ElFormItem label="合同类型">
                <ElSelect style="width: 224px"
                          size="small"
                >
                    <ElOption v-model="seachData.orderState"
                              label="全部"
                              value="1"
                    />
                </ElSelect>
            </ElFormItem>

            <ElFormItem label="金额是否异常">
                <ElSelect style="width: 224px"
                          size="small"
                >
                    <ElOption v-model="seachData.orderState"
                              label="全部"
                              value="1"
                    />
                </ElSelect>
            </ElFormItem>

            <ElFormItem style="float: right">
                <ElButton color="#DA0004"
                          size="small"
                          @click="getData"
                >
                    搜索
                </ElButton>

                <ElButton size="small"
                          @click="reset"
                >
                    重置
                </ElButton>
            </ElFormItem>
        </ElForm>

        <div class="order-btn">
            <label style="margin-right: 20px">订单状态</label>

            <ElButton v-for="item in orderBtn"
                      :key="item.id"
                      size="small"
                      :color="item.id === btnId ? '#DA0004' : ''"
                      @click="orderCheckBtnFn(item.id)"
            >
                {{ item.text }}
            </ElButton>
        </div>
    </div>

    <div class="order-list">
        <!-- <div class="list-btn">
            <el-button size="small" plain color="#DA0004">导出</el-button>
            <el-button size="small" plain color="#DA0004" @click="toSetup">退款设置</el-button>
        </div> -->
        <div class="list">
            <vxe-grid ref="xGrid"
                      v-bind="gridOptions"
                      v-on="gridEvents"
            >
                <template #checkbox_header="{ checked, indeterminate }">
                    <span class="custom-checkbox"
                          @click.stop="toggleAllCheckboxEvent"
                    >
                        <i v-if="indeterminate"
                           class="vxe-icon-square-minus-fill"
                        />

                        <i v-else-if="checked"
                           class="vxe-icon-square-checked-fill"
                        />

                        <i v-else
                           class="vxe-icon-checkbox-unchecked"
                        />
                    </span>
                </template>

                <template #checkbox_cell="{ row, checked, indeterminate }">
                    <span class="custom-checkbox"
                          @click.stop="toggleCheckboxEvent(row)"
                    >
                        <i v-if="indeterminate"
                           class="vxe-icon-square-minus-fill"
                        />

                        <i v-else-if="checked"
                           class="vxe-icon-square-checked-fill"
                        />

                        <i v-else
                           class="vxe-icon-checkbox-unchecked"
                        />
                    </span>
                </template>

                <template #status="{ row }">
                    <ElTag :type="tags[row.status ?? 0].type"
                           size="small"
                    >
                        {{ tags[row.status ?? 0].text }}
                    </ElTag>
                </template>

                <template #operate="{ row }">
                    <ButtonItem :btns="btns"
                                @btn-click="doAction($event, row)"
                    />
                </template>
            </vxe-grid>
        </div>
    </div>
    <!-- <el-dialog v-model="refundVisible" title="退款设置" style="font-size: 20px; font-weight: 600" width="30%">
        <div style="height: 284px; padding: 20px">
            <p class="ck">自动退款是否启用</p>
            <el-switch v-model="value1" />
            <p style="margin-top: 10px" class="ck">自动退款有效期</p>
            <el-input-number v-model="num" :min="1" :max="10" />
        </div>
        <template #footer>
            <div style="text-align: center">
                <el-button color="#DA0004" @click="cancelSetup()"> 保存 </el-button>
                <el-button @click="cancelSetup()">取消</el-button>
            </div>
        </template>
    </el-dialog> -->
</template>

<style lang="scss" scoped>
.seach {
    height: 200px;
    background-color: #fff;
    padding: 20px;

    .order-btn {
        margin-top: 20px;
        font-size: 12px;
    }
}

.order-list {
    margin-top: 20px;
    padding: 30px;
    background: #fff;

    .list-btn {
        margin-bottom: 20px;
    }
}

.ck::after {
    content: '*';
    color: #da0004;
}

.pag {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    padding: 0 13px;
}

:deep(.el-form .el-form-item .el-form-item__label) {
    font-size: 12px;
}

:deep(.el-table__row .el-table__cell .cell) {
    padding: 12px 16px;

    // line-height: 8px;
    // color: #E5E6EB;
    font-size: 12px;
}

:deep(.el-table__header .el-table__cell .cell) {
    font-family: 'PingFang SC';
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    letter-spacing: 0;
    text-align: left;
    color: #86909c;
}
</style>
